<div class="layui-add" xmlns:th="http://www.thymeleaf.org">
    <form class="layui-form layui-add-form" action="">
        <div class="layui-form-item layui-header-item">
            <div class="layui-inline">
                <h3 class="layui-inline">新增用户信息</h3>
            </div>
            <div onclick="reqRawHtml('/user/list');" class="layui-inline layui-rtn-btn fr">
                <i class="layui-icon layui-icon-return"></i> 返回上一页
            </div>
        </div>
        <div class="layui-form-item mb0">
            <div class="layui-inline width_50">
                <label class="layui-form-label">验证手机</label>
                <div class="layui-input-inline">
                    <input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input width300">
                </div>
            </div>
            <div class="layui-inline width_48">
                <label class="layui-form-label">验证邮箱</label>
                <div class="layui-input-inline">
                    <input type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input width300">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline width_50">
                <label class="layui-form-label">验证手机</label>
                <div class="layui-input-inline">
                    <input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input width300">
                </div>
            </div>
            <div class="layui-inline width_48">
                <label class="layui-form-label">验证邮箱</label>
                <div class="layui-input-inline">
                    <input type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input width300">
                </div>
            </div>
        </div>
        <div class="layui-form-item" style="margin-top:30px;">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

<script>
    //一般直接写在一个js文件中
    layui.use(['layer', 'form', 'jquery', 'element'], function () {
        var layer = layui.layer
            , form = layui.form
            , $ = layui.jquery;
        // 表单验证
        form.verify({
            pass: [
                /^[\S]{6,12}$/
                , '密码必须6到12位，且不能出现空格'
            ]
        });

        // 表单提交
        form.on('submit(*)', function (data) {
            if (data.field.password !== data.field.rePassword) {
                layer.msg("密码不一致");
                return false;
            }
            $.ajax({
                url: "./update/password",
                type: "POST",
                data: data.field,
                success: function (data) {
                    if (data.status === 200) {
                        layer.msg("更换密码成功, 即将重新登录");
                        setInterval(function () {
                            window.location.href = "../index.html"
                        }, 1500);
                    } else if (data.status === 201) {
                        layer.msg(data.data)
                    }
                },
                error: function (xhr, status, error) {
                    if (xhr.status === 400) {
                        layer.msg("密码格式有误")
                    } else {
                        layer.error("网络请求失败")
                    }
                }
            });
            return false; //阻止表单跳转。
        });
    });
</script>